<clr-main-container *ngIf="ms.webWorker && ms.show && ms.game" [@fadeInOut]>
  <!-- Header -->
  <clr-header class="header" [ngClass]="os.headerClass">
    <div class="header-nav" [clr-nav-level]="1">
      <a
        routerLink="/home"
        class="nav-link"
        [routerLinkActive]="'active'"
        (click)="navigateLast()"
      >
        <span class="nav-text">
          <span class="small-title">
            首页
          </span>
          <clr-icon shape="home"></clr-icon>
        </span>
      </a>

      <a
        [routerLink]="'lab'"
        class="nav-link"
        [routerLinkActive]="'active'"
        *ngIf="ms.game.resourceManager.computing.unlocked"
      >
        <span class="nav-text">
          <span class="small-title">
            实验室
          </span>
          <clr-icon
            [ngClass]="{
              'is-warning': ms.game.researchManager.isNew,
              'is-solid': ms.game.researchManager.isNew
            }"
            shape="lightbulb"
          ></clr-icon>
        </span>
      </a>

      <a
        [routerLink]="'fleet'"
        class="nav-link"
        [routerLinkActive]="'active'"
        *ngIf="ms.game.researchManager.corvette.firstDone"
      >
        <span class="nav-text">
          <span class="small-title">
            船厂
          </span>
          <clr-icon
            shape="cog"
            [ngClass]="{ 'has-alert': ms.game.overNavalCap }"
          ></clr-icon>
        </span>
      </a>

      <a
        [routerLink]="'battle'"
        class="nav-link"
        [routerLinkActive]="'active'"
        *ngIf="ms.game.researchManager.corvette.firstDone"
      >
        <span class="nav-text">
          <span class="small-title">
            战斗
          </span>
          <clr-icon shape="crosshairs"></clr-icon>
        </span>
      </a>

      <a
        [routerLink]="'enemies'"
        class="nav-link"
        [routerLinkActive]="'active'"
        *ngIf="ms.game.researchManager.telescope.firstDone"
      >
        <span class="nav-text">
          <span class="small-title">
            世界
          </span>
          <clr-icon shape="world"></clr-icon>
        </span>
      </a>

      <a
        [routerLink]="'auto'"
        class="nav-link"
        [routerLinkActive]="'active'"
        *ngIf="AutomatorManager.automatorLevel >= 3"
      >
        <span class="nav-text">
          <span class="small-title">
            自动化工程师
          </span>
          <clr-icon shape="applications"></clr-icon>
        </span>
      </a>

      <a
        [routerLink]="'darkMatter'"
        class="nav-link"
        [routerLinkActive]="'active'"
        *ngIf="ms.game.darkMatterManager.darkMatter.unlocked"
      >
        <span class="nav-text">
          <span class="small-title">
            暗物质
          </span>
          <clr-icon shape="darkMatter"></clr-icon>
        </span>
      </a>

      <a
        [routerLink]="'prestige'"
        class="nav-link"
        [routerLinkActive]="'active'"
        *ngIf="
          ms.game.prestigeManager.totalPrestige > 0 ||
          ms.game.prestigeManager.prestigeToEarn > 0
        "
      >
        <span class="nav-text">
          声望
          <!-- <clr-icon shape="star"></clr-icon> -->

          <span
            class="badge badge-info"
            *ngIf="
              ms.game.prestigeManager.prestigeToEarn > 0 &&
              !this.ms.game.prestigeManager.canAscend()
            "
          >
            <app-formatted-quantity
              [quantity]="ms.game.prestigeManager.prestigeToEarn"
              [integer]="true"
              [monospace]="false"
            ></app-formatted-quantity>
          </span>
          <span
            class="badge badge-success"
            *ngIf="this.ms.game.prestigeManager.canAscend()"
          >
            转生
          </span>
        </span>
      </a>
    </div>

    <div class="header-actions">
      <clr-dropdown>
        <button class="nav-icon" clrDropdownTrigger>
          <clr-icon shape="tools"></clr-icon>
          <clr-icon shape="caret down"></clr-icon>
        </button>
        <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
          <a clrDropdownItem (click)="all100()">全部 100%</a>
          <a clrDropdownItem (click)="skip(1)">扭曲 1 分钟</a>

          <clr-dropdown *ngIf="ms.game.darkMatterManager.darkMatter.unlocked">
            <button type="button" clrDropdownTrigger>时间扭曲</button>
            <clr-dropdown-menu clrPosition="left-top" *clrIfOpen>
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(1) }"
                (click)="skip(1)"
                >扭曲 1 分钟</a
              >
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(5) }"
                (click)="skip(5)"
                >扭曲 5 分钟</a
              >
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(10) }"
                (click)="skip(10)"
                >扭曲 10 分钟</a
              >
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(15) }"
                (click)="skip(15)"
                >扭曲 15 分钟</a
              >
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(30) }"
                (click)="skip(30)"
                >扭曲 30 分钟</a
              >
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(60) }"
                (click)="skip(60)"
                >扭曲 1 小时</a
              >
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(60 * 24) }"
                (click)="skip(60 * 24)"
                >扭曲 1 天</a
              >
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(60 * 24 * 7) }"
                (click)="skip(60 * 24 * 7)"
                >扭曲 1 周</a
              >
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(60 * 24 * 30) }"
                (click)="skip(60 * 24 * 30)"
                >扭曲 1 月</a
              >
              <a
                clrDropdownItem
                [ngClass]="{ disabled: !warpAv(60 * 24 * 365) }"
                (click)="skip(60 * 24 * 365)"
                >扭曲 1 年</a
              >
            </clr-dropdown-menu>
          </clr-dropdown>

          <clr-dropdown>
            <button type="button" clrDropdownTrigger>操作</button>
            <clr-dropdown-menu clrPosition="left-top" *clrIfOpen>
              <a clrDropdownItem (click)="all100()">全部 100%</a>
              <a clrDropdownItem (click)="all(90)">全部 90%</a>
              <a clrDropdownItem (click)="all(80)">全部 80%</a>
              <a clrDropdownItem (click)="all(70)">全部 70%</a>
              <a clrDropdownItem (click)="all(60)">全部 60%</a>
              <a clrDropdownItem (click)="all(50)">全部 50%</a>
              <a clrDropdownItem (click)="all(40)">全部 40%</a>
              <a clrDropdownItem (click)="all(30)">全部 30%</a>
              <a clrDropdownItem (click)="all(20)">全部 20%</a>
              <a clrDropdownItem (click)="all(10)">全部 10%</a>
            </clr-dropdown-menu>
          </clr-dropdown>
        </clr-dropdown-menu>
      </clr-dropdown>

      <a href="javascript://" class="nav-link nav-icon">
        <clr-icon
          [attr.shape]="ms.game.isPaused ? 'play' : 'pause'"
          (click)="ms.game.isPaused = !ms.game.isPaused"
        ></clr-icon>
      </a>
      <a
        [routerLink]="'info'"
        class="nav-link nav-icon"
        [routerLinkActive]="'active'"
      >
        <clr-icon shape="help-info"></clr-icon>
      </a>
      <a
        [routerLink]="'opt/save/'"
        class="nav-link nav-icon"
        [routerLinkActive]="'active'"
      >
        <clr-icon shape="cog"></clr-icon>
      </a>
    </div>
  </clr-header>
  <!-- End Header -->

  <!-- Materials list -->
  <app-material-list></app-material-list>

  <router-outlet></router-outlet>

  <!-- Modals -->
  <clr-modal [(clrModalOpen)]="ms.game.researchManager.isNewModal">
    <h3 class="modal-title">
      <clr-icon shape="lightbulb"></clr-icon>
      研究
    </h3>
    <div class="modal-body">
      <p>
        祝贺你解锁实验室选项卡!<br />
        它是左上角的那个灯泡。<br />
        你可以通过选项禁用此消息 (点右上角的齿轮)-> 通知 -> 解锁科技时弹框提示。
      </p>
    </div>
    <div class="modal-footer">
      <button
        type="button"
        class="btn btn-primary"
        (click)="ms.game.researchManager.isNewModal = false"
      >
        确定
      </button>
    </div>
  </clr-modal>

  <ng-container *ngIf="ms.game.prestigeManager.totalPrestige < 1">
    <clr-modal [(clrModalOpen)]="ms.game.researchManager.corvetteModal">
      <h3 class="modal-title">
        <clr-icon shape="rank1"></clr-icon>
        护卫舰
      </h3>
      <div class="modal-body">
        <p>
          恭喜你解锁了护卫舰！<br />
          护卫舰将让你赢得战斗，获得更多的区域
          （可居住的空间，采矿区和水晶区）。<br />
          要制造护卫舰，你需要合金和工人无人机。只有当你制造船只时，工人无人机才会工作。然后点击左上方的齿轮，制造20艘护卫舰。要攻击第一个敌人，请单击十字瞄准线图标。
        </p>
      </div>
      <div class="modal-footer">
        <button
          type="button"
          class="btn btn-primary"
          (click)="ms.game.researchManager.corvetteModal = false"
        >
          确定
        </button>
      </div>
    </clr-modal>
  </ng-container>

  <clr-modal [(clrModalOpen)]="ms.game.enemyManager.prestigeModal">
    <h3 class="modal-title">
      <clr-icon shape="info"></clr-icon>
      声望
    </h3>
    <div class="modal-body">
      <p>
        通过击败第一个敌人，你开启了声望。<br />
        你现在可以声望得到一个声望点，但你可能想在声望之前得到更多的声望点。为了获得更多的声望点打败高级敌人，声望点等于被打败敌人的最高等级。
      </p>
    </div>
    <div class="modal-footer">
      <button
        type="button"
        class="btn btn-primary"
        (click)="ms.game.enemyManager.prestigeModal = false"
      >
        确定
      </button>
    </div>
  </clr-modal>

  <clr-modal [(clrModalOpen)]="ms.game.enemyManager.ascendModal">
    <h3 class="modal-title">
      <clr-icon shape="info"></clr-icon>
      转生
    </h3>
    <div class="modal-body">
      <p>
        在威望等级>= 20和>=40你可以转生，转生是不可跳过的，你现在应该转生。<br />
        转生将把声望重置为1，但你将从声望点(叠加x2
        x4)获得双重效果，并将自动人员级别提高30%(叠加)
      </p>
    </div>
    <div class="modal-footer">
      <button
        type="button"
        class="btn btn-primary"
        (click)="ms.game.enemyManager.ascendModal = false"
      >
        确定
      </button>
    </div>
  </clr-modal>
</clr-main-container>

<div *ngIf="!ms.webWorker">
  <p>
    对不起!不支持此浏览器。
    <br />
    试试chrome或firefox
  </p>
</div>
